/*
 *  Copyright 2025 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) url('../../../styles/variables.less');

.sso-array-field {
  &-container {
    position: relative;
  }

  &-divider {
    position: absolute;
    right: @size-xl;
    top: 0;
    min-height: @size-2xl;
    height: 100%;
    border-left: 1px solid @grey-22;
    margin-top: @size-xxs;
  }

  &-copy-button {
    position: absolute;
    right: 0;
    &.ant-btn-icon-only.ant-btn-sm {
      padding: @size-xs 0;
      text-align: center;
      &:hover,
      &:focus,
      &:active {
        svg path {
          stroke: @grey-500;
        }
      }
    }
  }
}

.sso-select-container {
  position: relative;
  overflow: hidden;

  .ant-select-selection-overflow {
    padding-left: 2px !important;
    padding-right: @size-md;
    gap: @size-xxs;
    padding-bottom: 0;
  }

  .ant-select-selection-item {
    display: flex;
    align-items: center;
    gap: @size-xxs;
    background: @blue-29;
    border: 1px solid @blue-30;
    border-radius: 6px;
    margin: 0;
    min-height: @size-lg;
    height: auto;
    color: @grey-900;
    font-size: @size-sm;
    font-weight: @font-medium;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    padding: @size-xxs @size-xs;

    .ant-select-selection-item-content {
      flex: 1;
      word-break: break-all;
      word-wrap: break-word;
      white-space: normal;
      line-height: 1.4;
      color: @tag-text;
      font-weight: @font-regular;
      font-size: @size-sm;
    }

    .ant-select-selection-item-remove {
      margin-left: @size-xxs;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      align-self: flex-start;
      margin: auto;
      flex-shrink: 0;

      background-color: transparent;
      border: none;

      &:hover {
        background-color: transparent;
      }
    }
  }

  .ant-select-selector {
    background: @background-color;
    border: 1px solid @grey-300;
    border-radius: @border-rad-xs;

    box-shadow: 0px 1px 2px 0px @grey-27;

    &:hover {
      border-color: @primary-6;
    }

    &:focus {
      border-color: @primary-color;
      box-shadow: @box-shadow-ant-select;
      outline: none;
    }

    .ant-select-selection-search {
      margin: 0;

      .ant-select-selection-search-input {
        padding-left: 0;
        margin-left: 0;
        text-indent: 0;
        box-sizing: border-box;
      }
    }

    .ant-select-selection-placeholder {
      color: @grey-500;
      font-size: @font-size-base;
      font-weight: 400;
      line-height: @size-mlg;
      margin-left: 2px;
    }
  }

  // Hover state for the select
  .ant-select:hover .ant-select-selector {
    border-color: @primary-6;
  }

  // Focused state for the select
  .ant-select-focused .ant-select-selector {
    border-color: @primary-color;
    box-shadow: @box-shadow-ant-select;
    outline: none;
  }

  // Override Ant Design's default input positioning for tags mode
  .ant-select-selection-overflow {
    padding-left: 0;
    padding-bottom: 0;
  }

  .ant-select-selection-search-input {
    padding-left: 0;
    margin-left: 0;
    text-indent: 0;
  }

  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-radius: @border-rad-xs;
    padding: @size-xs @size-sm;
  }
}
.array-field-label {
  color: @grey-700;
  font-weight: 500;
  font-size: @font-size-base;

  &.required-field::after {
    color: @red-23;
  }
}

// Custom dropdown arrow icon for array field selects
.sso-select-container {
  .ant-select .ant-select-arrow {
    .anticon {
      display: none;
    }

    &::after {
      content: '';
      display: block;
      width: @size-sm;
      height: @size-xs;
      margin-right: @size-xxs;
      background-image: url('../../../assets/svg/ic-dropdown-arrow.svg');
      background-size: @size-sm @size-xs;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

// Add box shadow to any input fields in array field templates
.sso-array-field {
  input[type='text'],
  input[type='email'],
  input[type='url'],
  input[type='number'],
  .ant-input,
  .form-control {
    box-shadow: 0px 1px 2px 0px @grey-27;

    &:focus,
    &:focus-visible,
    &:focus-within,
    &:active {
      border-color: @grey-300 !important;
      box-shadow: 0px 1px 2px 0px @grey-27 !important;
      outline: none !important;
    }
  }
}

// Apply proper blue focus styles to select container
.sso-select-container,
.sso-array-field {
  .ant-select {
    &:hover .ant-select-selector {
      border-color: @primary-6 !important;
    }

    &.ant-select-focused .ant-select-selector,
    &.ant-select-open .ant-select-selector {
      border-color: @primary-color !important;
      box-shadow: @box-shadow-ant-select !important;
      outline: none !important;
    }

    .ant-select-selector {
      &:hover {
        border-color: @primary-6 !important;
      }

      &:focus,
      &:focus-within,
      &:active {
        border-color: @primary-color !important;
        box-shadow: @box-shadow-ant-select !important;
        outline: none !important;
      }
    }
  }
}

// Error state styling - should override all other states
.sso-array-field.has-error {
  // Error styling for input fields
  input[type='text'],
  input[type='email'],
  input[type='url'],
  input[type='number'],
  .ant-input,
  .form-control {
    border-color: @red-23 !important;

    &:focus,
    &:focus-visible,
    &:focus-within,
    &:active {
      border-color: @red-23 !important;
      box-shadow: none !important;
      outline: none !important;
    }
  }

  // Error styling for select fields
  .ant-select-status-error {
    .ant-select-selector {
      border-color: @red-23 !important;

      &:hover {
        border-color: @red-23 !important;
      }
    }

    &.ant-select-focused .ant-select-selector,
    &.ant-select-open .ant-select-selector,
    .ant-select-selector:focus,
    .ant-select-selector:focus-within,
    .ant-select-selector:active {
      border-color: @red-23 !important;
      outline: none !important;
      box-shadow: none !important;
    }
  }
}

// Specific override for ant-select show-search input
.sso-select-container
  .ant-select-show-search.ant-select:not(.ant-select-customize-input)
  .ant-select-selector
  input,
.sso-array-field
  .ant-select-show-search.ant-select:not(.ant-select-customize-input)
  .ant-select-selector
  input,
.sso-array-field-container
  .ant-select-show-search.ant-select:not(.ant-select-customize-input)
  .ant-select-selector
  input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  &:focus,
  &:focus-visible,
  &:focus-within,
  &:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
}
